<template>
    <v-app class="custom-layout">
        <v-content>
            <header class="header" style="width: 90%">
                <v-app-bar flat height="56px">
                    <v-app-bar-nav-icon icon @click="drawer=!drawer" v-if="mobiled"></v-app-bar-nav-icon>
                    <!--<v-toolbar-title>-->
                    <v-img :src="odooUrl+'/web/image/res.company/1/logo'" max-height="56px" contain></v-img>
                    <!--</v-toolbar-title>-->
                    <v-spacer></v-spacer>
                    <template v-for="m in $static.KuERP.allWebsiteMenu">
                        <v-toolbar-items :key="m.id" class="d-none d-sm-flex" v-if="!mobiled">
                            <v-btn text :to="m.url" v-if="m.id!==1&& m.id!=35">{{m.name}}</v-btn>
                        </v-toolbar-items>
                    </template>
                    <!--<input-->
                            <!--id="search"-->
                            <!--v-model="searchTerm"-->
                            <!--class="input"-->
                            <!--type="text"-->
                            <!--placeholder="Search">-->
                    <!--<g-link-->
                            <!--v-for="result in searchResults"-->
                            <!--:key="result.id"-->
                            <!--:to="result.path"-->
                            <!--class="navbar-item">{{result}}-->
                    <!--</g-link>-->
                </v-app-bar>
                <!--<v-breadcrumbs :items="items"></v-breadcrumbs>-->
            </header>

            <v-navigation-drawer v-if="drawer===false" permanent temporary clipped>
                <template v-for="m in $static.KuERP.allWebsiteMenu">
                    <v-list-item link :key="m.id">
                        <v-btn text :to="m.url">{{m.name}}</v-btn>
                    </v-list-item>
                </template>
            </v-navigation-drawer>
            <!--<v-carousel>-->
            <!--<v-carousel-item-->
            <!--v-for="(item,i) in items"-->
            <!--:key="i"-->
            <!--:src="item.src"-->
            <!--reverse-transition="fade-transition"-->
            <!--transition="fade-transition"-->
            <!--&gt;-->
            <!--<v-sheet-->
            <!--height="100%"-->
            <!--&gt;-->
            <!--<v-row-->
            <!--class="fill-height"-->
            <!--align="center"-->
            <!--justify="center"-->
            <!--&gt;-->
            <!--<div class="display-3">Slide</div>-->
            <!--</v-row>-->
            <!--</v-sheet>-->
            <!--</v-carousel-item>-->
            <!--</v-carousel>-->
            <v-container fluid>
                <slot/>
            </v-container>
            <v-divider></v-divider>
            <pfooter></pfooter>
        </v-content>
    </v-app>
</template>

<static-query>
    query {
    metadata {
    siteName
    }
    KuERP{
    allWebsiteMenu{
    id
    name
    url
    }
    }
    }
</static-query>
<script>
    import config from '../../gridsome.config';
    import Pfooter from "./Footer";
    // import Search from 'gridsome-plugin-flexsearch/SearchMixin'

    export default {
        components: {Pfooter},
        // mixins: [Search],
        data() {
            return {
                odooUrl: config.odooUrl,
                images: [''],
                drawer: true, // 左侧导航是否隐藏,
                mobiled: false,
                searchTerm: ''

            }
        },
        computed: {
            searchResults() {
                const searchTerm = this.searchTerm
                if (searchTerm.length < 3) return []
                let res= this.$search.search({query: searchTerm, limit: 5})
                return res
            }
        },
        mounted() {
            this.mobiled = (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth) < 960
        },
        methods: {}
    }
</script>
<style lang="scss" scoped>
    $margin-size: 20px;

    body {
        font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI',
        Roboto, 'Helvetica Neue', Arial, sans-serif;
        margin: 0;
        padding: 0;
        line-height: 1.5;
    }

    .custom-layout {
        margin: 0 auto;
        width: 90%;
        padding-left: $margin-size;
        padding-right: $margin-size;
    }

    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: $margin-size;
        height: 80px;
    }

    .nav__link {
        margin-left: $margin-size;
    }

    .text-center {
        align-items: center;
        text-align: center;
        align-content: center;
    }
</style>

